<template>
  <div class="app-container">
    <div class="row-layout">
      <!-- <el-row :gutter="10">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div class="overhaul-box">
              <div style="display: flex; margin: auto; width: 36%">
                <p class="check-no">检11-2</p>
                <p
                  class="check-no"
                  style="margin-left: 35px"
                  v-if="listObj.type && listObj.type == '断电作业'"
                >
                  {{ listObj.type }}
                </p>
                <p
                  class="check-no"
                  style="margin-left: 35px; color: red"
                  v-else-if="listObj.type && listObj.type != '断电作业'"
                >
                  {{ listObj.type }}
                </p>
                <p class="check-no" style="margin-left: 35px" v-else></p>
              </div>
              <div class="check-top">
                <span class="check-text">车号：</span
                ><span class="check-num">{{ listObj.carCode }}</span>
                <span class="start-time-text">开始时间：</span>
                <span class="start-time">{{ listObj.startTime || "/" }}</span>
                <span class="duration">总时长：</span>
                <span class="duration-time">{{ listObj.duration }}</span>
              </div>
              <div class="check-middle">
                <div style="display: flex; width: 100%; height: 27px">
                  <span class="team">班组：</span>
                  <vue-seamless-scroll
                    :data="listObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        class="team-num"
                        v-for="(item, index) in listObj.tworkRecordReVoList"
                        :key="item.id + index"
                      >
                        {{ item.workTeamName }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
                <div style="display: flex; width: 100%; height: 27px">
                  <span class="team">时长：</span>
                  <vue-seamless-scroll
                    :data="listObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="item in listObj.tworkRecordReVoList"
                        :key="item.id + '1'"
                        class="duration-num"
                      >
                        {{ item.duration }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
              <div
                v-if="listObj.carCode !== '' && listObj.carCode !== '无车'"
                class="check-bottom"
              >
                <img src="../assets/images/istrain.png" width="100%" alt="" />
              </div>
              <div
                v-if="listObj.carCode === '' || listObj.carCode === '无车'"
                class="check-bottom"
              >
                <img src="../assets/images/notrain.png" width="100%" alt="" />
              </div>
            </div>
            <div class="overhaul-box">
              <div style="display: flex; margin: auto; width: 36%">
                <p class="check-no">检12-2</p>

                <p
                  class="check-no"
                  style="margin-left: 35px"
                  v-if="listTwoObj.type && listTwoObj.type == '断电作业'"
                >
                  {{ listTwoObj.type }}
                </p>
                <p
                  class="check-no"
                  style="margin-left: 35px; color: red"
                  v-else-if="listTwoObj.type && listTwoObj.type != '断电作业'"
                >
                  {{ listTwoObj.type }}
                </p>
                <p class="check-no" style="margin-left: 35px" v-else></p>
              </div>
              <div class="check-top">
                <span class="check-text">车号：</span
                ><span class="check-num">{{ listTwoObj.carCode }}</span>
                <span class="start-time-text">开始时间：</span>
                <span class="start-time">{{ listTwoObj.startTime || "/" }}</span>
                <span class="duration">总时长：</span>
                <span class="duration-time">{{ listTwoObj.duration }}</span>
              </div>
              <div class="check-middle">
                <div style="display: flex; width: 100%; height: 27px">
                  <span class="team">班组：</span>
                  <vue-seamless-scroll
                    :data="listTwoObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        class="team-num"
                        v-for="(item, index) in listTwoObj.tworkRecordReVoList"
                        :key="item.id + index"
                      >
                        {{ item.workTeamName }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
                <div style="display: flex; width: 100%; height: 27px">
                  <span class="team">时长：</span>
                  <vue-seamless-scroll
                    :data="listTwoObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="item in listTwoObj.tworkRecordReVoList"
                        :key="item.id + '2'"
                        class="duration-num"
                      >
                        {{ item.duration }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>

              <div
                v-if="listTwoObj.carCode !== '' && listTwoObj.carCode !== '无车'"
                class="check-bottom"
              >
                <img src="../assets/images/istrain.png" width="100%" alt="" />
              </div>
              <div
                v-if="listTwoObj.carCode === '' || listTwoObj.carCode === '无车'"
                class="check-bottom"
              >
                <img src="../assets/images/notrain.png" width="100%" alt="" />
              </div>
            </div>
            <div class="overhaul-box">
              <div style="display: flex; margin: auto; width: 36%">
                <p class="check-no">检13-2</p>

                <p
                  class="check-no"
                  style="margin-left: 35px"
                  v-if="listThreeObj.type && listThreeObj.type == '断电作业'"
                >
                  {{ listThreeObj.type }}
                </p>
                <p
                  class="check-no"
                  style="margin-left: 35px; color: red"
                  v-else-if="listThreeObj.type && listThreeObj.type != '断电作业'"
                >
                  {{ listThreeObj.type }}
                </p>
                <p class="check-no" style="margin-left: 35px" v-else></p>
              </div>
              <div class="check-top">
                <span class="check-text">车号：</span>
                <span class="check-num">{{ listThreeObj.carCode }}</span>
                <span class="start-time-text">开始时间：</span>
                <span class="start-time">{{ listThreeObj.startTime || "/" }}</span>
                <span class="duration">总时长：</span>
                <span class="duration-time">{{ listThreeObj.duration }}</span>
              </div>
              <div class="check-middle">
                <div style="display: flex; width: 100%; height: 27px">
                  <span class="team">班组：</span>
                  <vue-seamless-scroll
                    :data="listThreeObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        class="team-num"
                        v-for="(item, index) in listThreeObj.tworkRecordReVoList"
                        :key="item.id + index"
                      >
                        {{ item.workTeamName }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
                <div style="display: flex; width: 100%; height: 27px">
                  <span class="team">时长：</span>
                  <vue-seamless-scroll
                    :data="listThreeObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="item in listThreeObj.tworkRecordReVoList"
                        :key="item.id + '3'"
                        class="duration-num"
                      >
                        {{ item.duration }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
              <div
                v-if="listThreeObj.carCode !== '' && listThreeObj.carCode !== '无车'"
                class="check-bottom"
              >
                <img src="../assets/images/istrain.png" width="100%" alt="" />
              </div>
              <div
                v-if="listThreeObj.carCode === '' || listThreeObj.carCode === '无车'"
                class="check-bottom"
              >
                <img src="../assets/images/notrain.png" width="100%" alt="" />
              </div>
            </div>
            <div class="overhaul-box">
              <div style="display: flex; margin: auto; width: 36%">
                <p class="check-no">检14-2</p>

                <p
                  class="check-no"
                  style="margin-left: 35px"
                  v-if="listFourObj.type && listFourObj.type == '断电作业'"
                >
                  {{ listFourObj.type }}
                </p>
                <p
                  class="check-no"
                  style="margin-left: 35px; color: red"
                  v-else-if="listFourObj.type && listFourObj.type != '断电作业'"
                >
                  {{ listFourObj.type }}
                </p>
                <p class="check-no" style="margin-left: 35px" v-else></p>
              </div>
              <div class="check-top">
                <span class="check-text">车号：</span>
                <span class="check-num">{{ listFourObj.carCode }}</span>
                <span class="start-time-text">开始时间：</span>
                <span class="start-time">{{ listFourObj.startTime || "/" }}</span>
                <span class="duration">总时长：</span>
                <span class="duration-time">{{ listFourObj.duration }}</span>
              </div>
              <div class="check-middle">
                <div style="display: flex; width: 100%; height: 27px">
                  <span class="team">班组：</span>
                  <vue-seamless-scroll
                    :data="listFourObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        class="team-num"
                        v-for="(item, index) in listFourObj.tworkRecordReVoList"
                        :key="item.id + index"
                      >
                        {{ item.workTeamName }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
                <div style="display: flex; width: 100%; height: 27px">
                  <span class="team">时长：</span>
                  <vue-seamless-scroll
                    :data="listFourObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="item in listFourObj.tworkRecordReVoList"
                        :key="item.id + '4'"
                        class="duration-num"
                      >
                        {{ item.duration }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
              <div
                v-if="listFourObj.carCode !== '' && listFourObj.carCode !== '无车'"
                class="check-bottom"
              >
                <img src="../assets/images/istrain.png" width="100%" alt="" />
              </div>
              <div
                v-if="listFourObj.carCode === '' || listFourObj.carCode === '无车'"
                class="check-bottom"
              >
                <img src="../assets/images/notrain.png" width="100%" alt="" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div class="overhaul-box">
              <div style="display: flex; margin: auto; width: 36%">
                <p class="check-no">检11-1</p>
                <p
                  class="check-no"
                  style="margin-left: 35px"
                  v-if="listFiveObj.type && listFiveObj.type == '断电作业'"
                >
                  {{ listFiveObj.type }}
                </p>
                <p
                  class="check-no"
                  style="margin-left: 35px; color: red"
                  v-else-if="listFiveObj.type && listFiveObj.type != '断电作业'"
                >
                  {{ listFiveObj.type }}
                </p>
                <p class="check-no" style="margin-left: 35px" v-else></p>
              </div>
              <div class="check-top">
                <span class="check-text">车号：</span>
                <span class="check-num">{{ listFiveObj.carCode }}</span>
                <span class="start-time-text">开始时间：</span>
                <span class="start-time">{{ listFiveObj.startTime || "/" }}</span>
                <span class="duration">总时长：</span>
                <span class="duration-time">{{ listFiveObj.duration }}</span>
              </div>
              <div class="check-middle">
                <div style="display: flex; width: 100%; height: 27px">
                  <span class="team">班组：</span>
                  <vue-seamless-scroll
                    :data="listFiveObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        class="team-num"
                        v-for="(item, index) in listFiveObj.tworkRecordReVoList"
                        :key="item.id + index"
                      >
                        {{ item.workTeamName }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>

                <div style="display: flex; width: 100%; height: 27px">
                  <span class="team">时长：</span>
                  <vue-seamless-scroll
                    :data="listFiveObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="item in listFiveObj.tworkRecordReVoList"
                        :key="item.id + '5'"
                        class="duration-num"
                      >
                        {{ item.duration }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
              <div
                v-if="listFiveObj.carCode !== '' && listFiveObj.carCode !== '无车'"
                class="check-bottom"
              >
                <img src="../assets/images/istrain.png" width="100%" alt="" />
              </div>
              <div
                v-if="listFiveObj.carCode === '' || listFiveObj.carCode === '无车'"
                class="check-bottom"
              >
                <img src="../assets/images/notrain.png" width="100%" alt="" />
              </div>
            </div>
            <div class="overhaul-box">
              <div style="display: flex; margin: auto; width: 36%">
                <p class="check-no">检12-1</p>

                <p
                  class="check-no"
                  style="margin-left: 35px"
                  v-if="listSixObj.type && listSixObj.type == '断电作业'"
                >
                  {{ listSixObj.type }}
                </p>
                <p
                  class="check-no"
                  style="margin-left: 35px; color: red"
                  v-else-if="listSixObj.type && listSixObj.type != '断电作业'"
                >
                  {{ listSixObj.type }}
                </p>
                <p class="check-no" style="margin-left: 35px" v-else></p>
              </div>
              <div class="check-top">
                <span class="check-text">车号：</span>
                <span class="check-num">{{ listSixObj.carCode }}</span>
                <span class="start-time-text">开始时间：</span>
                <span class="start-time">{{ listSixObj.startTime || "/" }}</span>
                <span class="duration">总时长：</span>
                <span class="duration-time">{{ listSixObj.duration }}</span>
              </div>
              <div class="check-middle">
                <div style="display: flex; width: 100%; height: 27px">
                  <span class="team">班组：</span>
                  <vue-seamless-scroll
                    :data="listSixObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        class="team-num"
                        v-for="(item, index) in listSixObj.tworkRecordReVoList"
                        :key="item.id + index"
                      >
                        {{ item.workTeamName }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
                <div style="display: flex; width: 100%; height: 27px">
                  <span class="team">时长：</span>
                  <vue-seamless-scroll
                    :data="listSixObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="item in listSixObj.tworkRecordReVoList"
                        :key="item.id + '6'"
                        class="duration-num"
                      >
                        {{ item.duration }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
              <div
                v-if="listSixObj.carCode !== '' && listSixObj.carCode !== '无车'"
                class="check-bottom"
              >
                <img src="../assets/images/istrain.png" width="100%" alt="" />
              </div>
              <div
                v-if="listSixObj.carCode === '' || listSixObj.carCode === '无车'"
                class="check-bottom"
              >
                <img src="../assets/images/notrain.png" width="100%" alt="" />
              </div>
            </div>
            <div class="overhaul-box">
              <div style="display: flex; margin: auto; width: 36%">
                <p class="check-no">检13-1</p>

                <p
                  class="check-no"
                  style="margin-left: 35px"
                  v-if="listSevenObj.type && listSevenObj.type == '断电作业'"
                >
                  {{ listSevenObj.type }}
                </p>
                <p
                  class="check-no"
                  style="margin-left: 35px; color: red"
                  v-else-if="listSevenObj.type && listSevenObj.type != '断电作业'"
                >
                  {{ listSevenObj.type }}
                </p>
                <p class="check-no" style="margin-left: 35px" v-else></p>
              </div>
              <div class="check-top">
                <span class="check-text">车号：</span>
                <span class="check-num">{{ listSevenObj.carCode }}</span>
                <span class="start-time-text">开始时间：</span>
                <span class="start-time">{{ listSevenObj.startTime || "/" }}</span>
                <span class="duration">总时长：</span>
                <span class="duration-time">{{ listSevenObj.duration }}</span>
              </div>
              <div class="check-middle">
                <div style="display: flex; width: 100%; height: 27px">
                  <span class="team">班组：</span>
                  <vue-seamless-scroll
                    :data="listSevenObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        class="team-num"
                        v-for="(item, index) in listSevenObj.tworkRecordReVoList"
                        :key="item.id + index"
                      >
                        {{ item.workTeamName }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
                <div style="display: flex; width: 100%; height: 27px">
                  <span class="team">时长：</span>
                  <vue-seamless-scroll
                    :data="listSevenObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="item in listSevenObj.tworkRecordReVoList"
                        :key="item.id + '7'"
                        class="duration-num"
                      >
                        {{ item.duration }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
              <div
                v-if="listSevenObj.carCode !== '' && listSevenObj.carCode !== '无车'"
                class="check-bottom"
              >
                <img src="../assets/images/istrain.png" width="100%" alt="" />
              </div>
              <div
                v-if="listSevenObj.carCode === '' || listSevenObj.carCode === '无车'"
                class="check-bottom"
              >
                <img src="../assets/images/notrain.png" width="100%" alt="" />
              </div>
            </div>
            <div class="overhaul-box">
              <div style="display: flex; margin: auto; width: 36%">
                <p class="check-no">检14-1</p>

                <p
                  class="check-no"
                  style="margin-left: 35px"
                  v-if="listEightObj.type && listEightObj.type == '断电作业'"
                >
                  {{ listEightObj.type }}
                </p>
                <p
                  class="check-no"
                  style="margin-left: 35px; color: red"
                  v-else-if="listEightObj.type && listEightObj.type != '断电作业'"
                >
                  {{ listEightObj.type }}
                </p>
                <p class="check-no" style="margin-left: 35px" v-else></p>
              </div>
              <div class="check-top">
                <span class="check-text">车号：</span>
                <span class="check-num">{{ listEightObj.carCode }}</span>
                <span class="start-time-text">开始时间：</span>
                <span class="start-time">{{ listEightObj.startTime || "/" }}</span>
                <span class="duration">总时长：</span>
                <span class="duration-time">{{ listEightObj.duration }}</span>
              </div>
              <div class="check-middle">
                <div style="display: flex; width: 100%; height: 27px">
                  <span class="team">班组：</span>
                  <vue-seamless-scroll
                    :data="listEightObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        class="team-num"
                        v-for="(item, index) in listEightObj.tworkRecordReVoList"
                        :key="item.id + index"
                      >
                        {{ item.workTeamName }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
                <div style="display: flex; width: 100%; height: 27px">
                  <span class="team">时长：</span>
                  <vue-seamless-scroll
                    :data="listEightObj.tworkRecordReVoList"
                    :class-option="seamlessScrollOption"
                    class="warp"
                  >
                    <ul class="ul-item">
                      <li
                        v-for="item in listEightObj.tworkRecordReVoList"
                        :key="item.id + '8'"
                        class="duration-num"
                      >
                        {{ item.duration }}
                      </li>
                    </ul>
                  </vue-seamless-scroll>
                </div>
              </div>
              <div
                v-if="listEightObj.carCode !== '' && listEightObj.carCode !== '无车'"
                class="check-bottom"
              >
                <img src="../assets/images/istrain.png" width="100%" alt="" />
              </div>
              <div
                v-if="listEightObj.carCode === '' || listEightObj.carCode === '无车'"
                class="check-bottom"
              >
                <img src="../assets/images/notrain.png" width="100%" alt="" />
              </div>
            </div>
          </div>
        </el-col>
      </el-row> -->
      <div class="rowsdata">
        <!-- one -->
        <div class="onesdata" v-for="x in 3" :key="x">
          <div class="lefts">
            <div class="check-no">检11-2</div>
            <div class="check-title">断电作业</div>
            <div style="width: 50px; margin-left: 25px; padding-bottom: 20px">
              <img
                src="../assets/images/haselect.png"
                alt=""
                style="width: 50px"
              />
            </div>
          </div>
          <div class="rights">
            <div class="check-top">
              <div class="topTitles">
                <span class="whitetitle">编号:</span>
                <span class="yellowtitle">CDR1180U-001</span>
              </div>
              <div class="topTitles">
                <span class="whitetitle">开始时间:</span>
                <span class="yellowtitle">5月12日 14:22</span>
              </div>
              <div class="topTitles">
                <span class="whitetitle">总时长:</span>
                <span class="yellowtitle">360分钟</span>
              </div>
            </div>
            <div style="display: flex">
              <div style="color: #fff; height: 30px; line-height: 30px">
                班组:
              </div>
              <div v-for="x in 7" :key="x">
                <div class="groups">检修1组</div>
              </div>
            </div>
            <div style="display: flex">
              <div style="color: #fff; height: 30px; line-height: 30px">
                时长:
              </div>
              <div v-for="x in 7" :key="x">
                <div class="times">2:14</div>
              </div>
            </div>
            <div style="display: flex">
              <div style="color: #fff; height: 30px; line-height: 30px">
                班组:
              </div>
              <div v-for="x in 7" :key="x">
                <div class="groups">检修1组</div>
              </div>
            </div>
            <div style="display: flex">
              <div style="color: #fff; height: 30px; line-height: 30px">
                时长:
              </div>
              <div v-for="x in 7" :key="x">
                <div class="times">2:14</div>
              </div>
            </div>
            <div
              v-if="listObj.carCode !== '' && listObj.carCode !== '无车'"
              class="check-bottom"
            >
              <img src="../assets/images/istrain.png" width="100%" alt="" />
            </div>
            <div
              v-if="listObj.carCode === '' || listObj.carCode === '无车'"
              class="check-bottom"
            >
              <img src="../assets/images/notrain.png" width="100%" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { shopsList } from "@/api/daping/daping";
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  components: {
    vueSeamlessScroll,
  },
  name: "workshops",
  data() {
    return {
      timer: null,
      scrollTime: null,
      scrollW: 0, //记录滚动到哪了
      items: [],
      animate: false,
      newFiveList: [],
      classOption: {
        limitMoveNum: 2,
        direction: 2,
      },
      listArr: [],
      listObj: { carCode: "", startTime: "", duration: "", type: "" },
      listTwoArr: [],
      listTwoObj: { carCode: "", startTime: "", duration: "", type: "" },
      listThreeArr: [],
      listThreeObj: { carCode: "", startTime: "", duration: "", type: "" },
      listFourArr: [],
      listFourObj: { carCode: "", startTime: "", duration: "", type: "" },
      listFiveArr: [],
      listFiveObj: { carCode: "", startTime: "", duration: "", type: "" },
      listSixArr: [],
      listSixObj: { carCode: "", startTime: "", duration: "", type: "" },
      listSevenArr: [],
      listSevenObj: { carCode: "", startTime: "", duration: "", type: "" },
      listEightArr: [],
      listEightObj: { carCode: "", startTime: "", duration: "", type: "" },
      flag: false,
      flagTwo: false,
      flagThree: false,
      flagFour: false,
      flagFive: false,
      flagSix: false,
      flagSeven: false,
      flagEight: false,
    };
  },
  mounted() {
    // this.getShopsList();
    // this.getShopsList2();
    // this.getShopsList3();
    // this.getShopsList4();
    // this.getShopsList5();
    // this.getShopsList6();
    // this.getShopsList7();
    // this.getShopsList8();
    // this.settimedata();
  },
  computed: {
    seamlessScrollOption() {
      return {
        step: 0.6, // 数值越大速度滚动越快
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  destroyed() {
    this.timer = null;
    clearInterval(this.timer);
  },
  methods: {
    // settimedata() {
    //   this.timer = setInterval(() => {
    //     this.getShopsList();
    //     this.getShopsList2();
    //     this.getShopsList3();
    //     this.getShopsList4();
    //     this.getShopsList5();
    //     this.getShopsList6();
    //     this.getShopsList7();
    //     this.getShopsList8();
    //   }, 1000 * 10);
    // },
    // 检11-2
    getShopsList() {
      let params = {
        complete: 2,
        trackId: 1,
      };
      shopsList(params).then((res) => {
        this.listArr = res.rows;
        if (res.rows.length > 0) {
          this.listObj = res.rows[0];
        } else {
          this.listObj = { carCode: "", startTime: "", duration: "", type: "" };
        }
      });
      //  this.orderShow();
    },
    // 检12-2
    getShopsList2() {
      let params2 = {
        complete: 2,
        trackId: 2,
      };

      shopsList(params2).then((res) => {
        this.listTwoArr = res.rows;
        if (res.rows.length > 0) {
          this.listTwoObj = res.rows[0];
        } else {
          this.listTwoObj = {
            carCode: "",
            startTime: "",
            duration: "",
            type: "",
          };
        }
      });
      //  this.orderTwoShow();
    },
    // 检13-2
    getShopsList3() {
      let params3 = {
        complete: 2,
        trackId: 3,
      };

      shopsList(params3).then((res) => {
        this.listThreeArr = res.rows;
        if (res.rows.length > 0) {
          this.listThreeObj = res.rows[0];
        } else {
          this.listThreeObj = {
            carCode: "",
            startTime: "",
            duration: "",
            type: "",
          };
        }
      });
      //  this.orderThreeShow();
    },
    // 检14-2
    getShopsList4() {
      let params4 = {
        complete: 2,
        trackId: 4,
      };

      shopsList(params4).then((res) => {
        this.listFourArr = res.rows;
        if (res.rows.length > 0) {
          this.listFourObj = res.rows[0];
        } else {
          this.listFourObj = {
            carCode: "",
            startTime: "",
            duration: "",
            type: "",
          };
        }
      });
      //  this.orderFourShow();
    },
    // 检11-1
    getShopsList5() {
      let params5 = {
        complete: 1,
        trackId: 1,
      };

      shopsList(params5).then((res) => {
        this.listFiveArr = res.rows;
        if (res.rows.length > 0) {
          this.listFiveObj = res.rows[0];
        } else {
          this.listFiveObj = {
            carCode: "",
            startTime: "",
            duration: "",
            type: "",
          };
        }
      });
      //  this.orderFiveShow();
    },
    // 检12-1
    getShopsList6() {
      let params6 = {
        complete: 1,
        trackId: 2,
      };

      shopsList(params6).then((res) => {
        this.listSixArr = res.rows;
        if (res.rows.length > 0) {
          this.listSixObj = res.rows[0];
        } else {
          this.listSixObj = {
            carCode: "",
            startTime: "",
            duration: "",
            type: "",
          };
        }
      });
      // this.orderSixShow();
    },
    // 检13-1
    getShopsList7() {
      let params7 = {
        complete: 1,
        trackId: 3,
      };

      shopsList(params7).then((res) => {
        this.listSevenArr = res.rows;
        if (res.rows.length > 0) {
          this.listSevenObj = res.rows[0];
        } else {
          this.listSevenObj = {
            carCode: "",
            startTime: "",
            duration: "",
            type: "",
          };
        }
      });
      //  this.orderSevenShow();
    },
    // 检14-1
    getShopsList8() {
      let params8 = {
        complete: 1,
        trackId: 4,
      };

      shopsList(params8).then((res) => {
        this.listEightArr = res.rows;
        if (res.rows.length > 0) {
          this.listEightObj = res.rows[0];
        } else {
          this.listEightObj = {
            carCode: "",
            startTime: "",
            duration: "",
            type: "",
          };
        }
      });
      //  this.orderEightShow();
    },
    // 检11-2 更新数据
    orderShow() {
      let timer = setInterval(() => {
        this.getShopsList();
      }, 1000 * 10);
    },
    // 检12-2 更新数据
    orderTwoShow() {
      let timer = setInterval(() => {
        this.getShopsList2();
      }, 1000 * 10);
    },
    // 检13-2 更新数据
    orderThreeShow() {
      let timer = setInterval(() => {
        this.getShopsList3();
      }, 1000 * 10);
    },
    // 检14-2 更新数据
    orderFourShow() {
      let timer = setInterval(() => {
        this.getShopsList4();
      }, 1000 * 10);
    },
    // 检11-1 更新数据
    orderFiveShow() {
      let timer = setInterval(() => {
        this.getShopsList5();
      }, 1000 * 10);
    },
    // 检12-1 更新数据
    orderSixShow() {
      let timer = setInterval(() => {
        this.getShopsList6();
      }, 1000 * 10);
    },
    // 检13-1 更新数据
    orderSevenShow(arr) {
      let timer = setInterval(() => {
        this.getShopsList7();
      }, 1000 * 10);
    },
    // 检14-1 更新数据
    orderEightShow(arr) {
      let timer = setInterval(() => {
        this.getShopsList8();
      }, 1000 * 10);
    },
  },
};
</script>
<style lang="scss" scoped>
#box {
  width: 100%;
}
.anim {
  // transition: all 0.5s;
  margin-top: -30px;
}
#con1 li {
  list-style: none;
  line-height: 30px;
  height: 30px;
}
.warp {
  width: 100px * 8;
  height: 27px;
  margin: 0;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    &.ul-item {
      display: flex;
      .li-item {
        width: 150px;
        height: 120px;
        margin-right: 10px;
        line-height: 120px;
        background-color: #999;
        color: #fff;
        text-align: center;
        font-size: 30px;
      }
    }
  }
}
.app-container {
  width: 100%;
  height: 100vh;
  background: url("../assets/images/dapingbg2.jpg") 0 0 no-repeat;
  background-size: 100% 100%;
  .row-layout {
    margin-top: 5%;
    .grid-content {
      .overhaul-box {
        width: 100%;
        // height: 260px;
        background: url("../assets/images/jianchabg.png") 0 0 no-repeat;
        background-size: 100% 100%;
        margin-bottom: 6px;
      }
    }
    .rowsdata {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .onesdata {
        width: 48%;
        display: flex;
        margin-bottom: 20px;
        .lefts {
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          margin-right: 10px;
        }
        .check-no {
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #fff;
          font-size: 22px;
          background-color: aquamarine;
        }
        .check-title {
          color: #00ff6c;
          font-size: 20px;
        }
        .whitetitle {
          color: #fff;
        }
        .yellowtitle {
          color: yellow;
        }
        .check-top {
          display: flex;
          justify-content: space-between;
        }
        .groups {
          width: 100px;
          height: 30px;
          line-height: 30px;
          color: #fff;
        }
        .times {
          width: 100px;
          height: 30px;
          line-height: 30px;
          color: yellow;
        }
        .check-bottom {
          padding-top: 20px;
        }
        .topTitles {
          height: 30px;
          line-height: 30px;
        }
      }
    }
  }
}
</style>
